<template>
  <div class="dashboard-container">
    <div class="page-title">
      <div>
        患者画像洞察
      </div>
      <div class="">
        <el-select v-model="selHosp" filterable multiple placeholder="选择医院" style="margin-right: 50px;">
          <el-option v-for="item in hospList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="datePicker" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
      </div>
    </div>

    <!-- 患者性别分析 -->
    <!-- <el-card class="content-section">
      <div class="section-header">
        <div class="section-info">
          <h2 class="section-title">患者性别分析</h2>
        </div>
      </div>
      <div class="gender-analysis-container">
        <div class="gender-distribution-item">
          <genderDistribution></genderDistribution>
        </div>
        <div class="gender-trend-item">
          <genderTrend></genderTrend>
        </div>
      </div>
    </el-card> -->

    <!-- 患者年龄分析 -->
    <!-- <el-card class="content-section">
      <div class="section-header">
        <div class="section-info">
          <h2 class="section-title">患者年龄分析</h2>
        </div>
      </div>
      <div class="age-analysis-container">
        <div class="age-distribution-item">
          <ageDistribution></ageDistribution>
        </div>
        <div class="age-trend-item">
          <ageTrend></ageTrend>
        </div>
      </div>
    </el-card> -->

    <!-- 患者地域画像 - 省级分布 -->
    <!-- <el-card class="content-section">
      <div class="section-header">
        <div class="section-info">
          <i class="el-icon-download download-icon" @click="downloadProvincialData" title="下载数据"></i>
          <h2 class="section-title">患者地域画像 - 省级分布</h2>
        </div>
      </div>
      <div class="provincial-distribution-item">
        <provincialDistribution :corpId="corpId" :dateRange="datePicker"></provincialDistribution>
      </div>
    </el-card> -->

    <!-- 患者地域画像 - 地级分布 -->
    <el-card class="content-section">
      <div class="section-header">
        <div class="section-info">
          <i class="el-icon-download download-icon" @click="downloadCityData" title="下载数据"></i>
          <h2 class="section-title">患者地域画像 - 河南省地级市分布</h2>
        </div>
      </div>
      <div class="city-distribution-item">
        <cityDistribution :corpId="corpId" :dateRange="datePicker"></cityDistribution>
      </div>
    </el-card>
  </div>
</template>

<script>
import genderDistribution from './genderDistribution.vue'
import genderTrend from './genderTrend.vue'
import ageDistribution from './ageDistribution.vue'
import ageTrend from './ageTrend.vue'
import provincialDistribution from './provincialDistribution.vue'
import cityDistribution from './cityDistribution.vue'
import { download } from '@/utils/request'

export default {
  name: 'dongcha',  //患者画像洞察
  components: {
    genderDistribution,
    genderTrend,
    ageDistribution,
    ageTrend,
    provincialDistribution,
    cityDistribution
  },
  data() {
    return {
      corpId: '',
      datePicker: this.getDefaultDateRange(),
      pickerOptions: {
        shortcuts: [{
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            start.setHours(0, 0, 0, 0);
            end.setTime(start.getTime() + 3600 * 1000 * 24 - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '前日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
            start.setHours(0, 0, 0, 0);
            end.setTime(start.getTime() + 3600 * 1000 * 24 - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay();
            const diff = start.getDate() - day + (day === 0 ? -6 : 1);
            start.setDate(diff);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay();
            const diff = start.getDate() - day - 6;
            start.setDate(diff);
            start.setHours(0, 0, 0, 0);
            end.setDate(diff + 6);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 1);
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setDate(0);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去7天',
          onClick(picker) {
            const end = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
            end.setHours(23, 59, 59, 999); // 昨天23:59:59
            
            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 6); // 从昨天往前推6天（总共7天）
            start.setHours(0, 0, 0, 0); // 7天前00:00:00
            
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去14天',
          onClick(picker) {
            const end = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
            end.setHours(23, 59, 59, 999); // 昨天23:59:59
            
            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 13); // 从昨天往前推13天（总共14天）
            start.setHours(0, 0, 0, 0); // 14天前00:00:00
            
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去30天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去90天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(0, 1);
            start.setHours(0, 0, 0, 0);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      hospList: [],
      selHosp: ''
    }
  },
  watch: {
    selHosp: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal) {
            this.corpId = newVal
          } else {
            this.corpId = ''
          }
        }
      }
    }
  },
  created() {},
  mounted() {
    this.GetMyCorpId()
  },
  methods: {
    getDefaultDateRange() {
      const end = new Date();
      end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
      end.setHours(23, 59, 59, 999); // 昨天23:59:59
      const start = new Date();
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 13); // 从昨天往前推13天（总共14天）
      start.setHours(0, 0, 0, 0); // 14天前00:00:00
      return [start, end];
    },
    async GetMyCorpId() { //获取我的医院列表
      await this.$store.dispatch('GetCorpIdInfo')
      this.hospList = this.$store.getters.corpData.map(item => ({
        value: item.corpId,
        label: item.corpName
      }));

      // 默认不选任何医院
      this.selHosp = []
      this.corpId = ''
    },
    downloadProvincialData() {
      return
      // 生成文件名：患者地域画像_省级分布_20250925
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      const fileName = `患者地域画像_省级分布_${year}${month}${day}.xlsx`
      
      // 构建导出参数
      const params = {
        corpId: this.corpId,
       // dateRange: this.datePicker
       startTime: this.datePicker[0],
       endTime: this.datePicker[1]
      }
      
      // 使用框架自带的下载方法，请求地址暂时为空
      this.download('', params, fileName)
    },
    
    downloadCityData() {
      this.$message.success('下载城市分布数据报表的功能开发中...')
      return
      // 生成文件名：患者地域画像_地级市分布_20250925
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      const fileName = `患者地域画像_地级市分布_${year}${month}${day}.xlsx`
      
      // 构建导出参数
      const params = {
        corpId: this.corpId,
       // dateRange: this.datePicker
       startTime: this.datePicker[0],
       endTime: this.datePicker[1]
      }
      
      // 使用框架自带的下载方法，请求地址暂时为空
      this.download('', params, fileName)
    }
  }
}
</script>

<style lang='scss' scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f4f7fc;
  min-height: calc(100vh - 84px);
}

.page-title {
  font-size: 31px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #4a90e2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-section {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px 20px 0 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
}

.section-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title {
  font-size: 23px;
  font-weight: 600;
  margin: 0;
  border-left: 4px solid #4a90e2;
  padding-left: 12px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.download-icon {
  font-size: 24px;
  color: #4a90e2;
  cursor: pointer;
  transition: all 0.3s;
  padding: 8px;
  border-radius: 50%;
  background-color: rgba(74, 144, 226, 0.1);
  
  &:hover {
    color: #ffffff;
    background-color: #4a90e2;
    transform: scale(1.1);
  }
}

.gender-analysis-container {
  display: flex;
  gap: 20px;
  width: 100%;
}

.gender-distribution-item {
  flex: 1;
  min-width: 0;
}

.gender-trend-item {
  flex: 1;
  min-width: 0;
}

.age-analysis-container {
  display: flex;
  gap: 20px;
  width: 100%;
}

.age-distribution-item {
  flex: 1;
  min-width: 0;
}

.age-trend-item {
  flex: 1;
  min-width: 0;
}

.provincial-distribution-item,
.city-distribution-item {
  width: 100%;
}

// 响应式设计
@media (max-width: 1200px) {
  .gender-analysis-container,
  .age-analysis-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .gender-distribution-item,
  .gender-trend-item,
  .age-distribution-item,
  .age-trend-item {
    width: 100%;
  }
}
</style>